<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="
        comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'
      "
    >
      <!-- <van-icon slot="left" name="cross" @click="$emit('click-close')" /> -->
    </van-nav-bar>
    <!-- /导航栏 -->

    <div class="comment_body">
      <!-- 当前评论项 -->
      <van-cell title="当前评论" />
      <comment-item :comment="comment" :isReplay="isReplayFlag" />
      <!-- 当前评论 -->

      <!-- /当前评论项 -->

      <van-cell title="所有回复" />
      <!-- 评论的回复列表 -->
      <article-comments
        :type="'c'"
        :source="comment.com_id"
        :commentList="commomReplyList"
        :isReplay="isReplayFlag"
      />
      <!-- /评论的回复列表 -->
    </div>

    <!-- 底部 -->
    <div class="post_wrap">
      <van-button class="post_btn" @click="isShowPost = true"
        >回复评论</van-button
      >
    </div>

    <van-popup position="bottom" v-model="isShowPost">
      <post-comment
        @add-comment="addCommentFn"
        :articleId="articleId"
        :target="comment.com_id"
      />
    </van-popup>
    <!-- /底部 -->
  </div>
</template>

<script>
import CommentItem from '@/components/comments/comment-item.vue'
import PostComment from './post-comment.vue'
import ArticleComments from './article-comments.vue'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    PostComment,
    ArticleComments
  },
  props: {
    comment: {
      type: Object,
      required: true
    },
    articleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      isShowPost: false, // 回复评论弹框是否出现
      commomReplyList: [], //
      isReplayFlag: true // 回复面板标记，对于回复的记录不能再次回复
    }
  },
  methods: {
    addCommentFn (obj) {
      // console.log(obj)
      this.isShowPost = false
      this.comment.reply_count++
      obj.is_liking = false
      this.commomReplyList.unshift(obj)
    }
  }
}
</script>

<style scoped lang="less">
.comment_body {
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  bottom: 88px;
  overflow-y: auto;
  z-index: 2;
}
.post_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #d8d8d8;

  .post_btn {
    width: 100%;
  }
}
</style>
